<template>
	<view class="cardBox">
		<view v-if="dataList.length > 0">
			<view v-for="(ites, index) in dataList" :key="index">
				<view class="my_box1" v-for="(item, indexs) in ites.students" :key="indexs">
					<view class="j_b_box">
						<text class="m_title">{{item.empName}}档案</text>
						<view >
							<text class="jiebang" @click="jiebang(ites, item)">{{title}}</text>
						</view>
					</view>
					<view class="m_info">
						<text class="m_txt">机&nbsp;&nbsp;&nbsp;构：<text class="m_txt1">{{item.orgName}}</text></text>
						<text class="m_txt">部&nbsp;&nbsp;&nbsp;门：<text class="m_txt1">{{item.deptName}}</text></text>
						<text class="m_txt">手机号：<text class="m_txt1">{{(item.mobileNo == '' || item.mobileNo == null || item.mobileNo == undefined) ? '暂无手机号' : item.mobileNo}}</text></text>
					</view>
					<view class="btn_dan" @click="jumpCard(item.empName, item.cards)">
						<text class="bind_txt">已绑定卡片</text>
						<view class="bindBox">
							<text class="num_txt num_txt1">{{item.cards.length}}</text>
							<text class="num_txt">张</text>
							<image src="/static/images/home/right_icon.png" class="right_icon"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<noContent></noContent>
		</view>
	</view>
</template>

<script>
	import noContent from './no-content.vue'
	export default {
		props: {
			dataList: {
				type: Array,
				default: () => []
			},
			title: {
				type: String,
				default: '解除个人绑定'
			}
		},
		data() {
			return {
				
			}
		},
		components: {
			noContent
		},
		mounted() {
			console.log(this.dataList)
		},
		methods: {
			jiebang(ites, item) {
				this.$emit('jiebang', ites, item)
			},
			jumpCard(empName, cards) {
				this.$emit('jumpCard', empName, cards)
			}
		}
	}
</script>

<style lang="scss">
	.cardBox {
		.my_box1 {
			box-shadow: 0px 8rpx 16rpx 0px rgba(0, 0, 0, 0.09);
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			background-color: #FFFFFF;
			margin-top: 20rpx;
			padding: 30rpx 30rpx 20rpx 30rpx;
			.j_b_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 56rpx;
				.m_title {
					font-family: "PingFangSC-Heavy, PingFang SC";
					font-weight: 600;
					font-size: 34rpx;
					color: #3C424F;
				}
				.jiebang {
					padding: 8rpx 20rpx;
					border-radius: 40rpx;
					color: #185AFF;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid #185AFF;
					font-size: 28rpx;
				}
			}
			.m_info {
				display: flex;
				flex-direction: column;
				padding-bottom: 60rpx;
				border-bottom: 1rpx solid #E6E6E6;
				.m_txt {
					font-family: "PingFangSC-Medium, PingFang SC";
					font-weight: 500;
					font-size: 28rpx;
					color: #6B707A;
					line-height: 50rpx;
				}
				.m_txt1 {
					padding-left: 26rpx;
					color: #3C424F;
					font-size: 28rpx;
				}
			}
			.btn_dan {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				line-height: 56rpx;
				padding: 20rpx 0 0 0;
				.bind_txt {
					font-size: 30rpx;
					font-family: "PingFangSC-Medium, PingFang SC";
					font-weight: 500;
					color: #6B707A;
				}
				.bindBox {
					display: flex;
					flex-direction: row;
					align-items: center;
					.num_txt {
						font-size: 30rpx;
						font-family: "PingFangSC-Heavy, PingFang SC";
						color: #3C424F;
					}
					.num_txt1 {
						color: #FA6400;
						font-weight: 600;
						margin-right: 4rpx;
					}
					.right_icon {
						width: 24px;
						height: 24px;
					}
				}
			}
		}
	}
</style>
